<template>
  <van-tab :title="'商品详情'">
    <div style="position: relative;" class="swipe" ref="swipes">
      <van-swipe :autoplay="3000" v-if="goods && !play">
        <van-swipe-item v-for="(image, index) in imageUrls" :key="index">
          <img :src="image" height="100%" width="100%"/>
        </van-swipe-item>
      </van-swipe>
      <div v-if="goods.videourl">
         <video ref="videoPlayer"
          :src="goods.videourl"
          :height="imageHeight"
          width="100%"
          preload="auto"
          @ended="play=false"
          controls
          playsinline="true"
          webkit-playsinline="true"
          x5-playsinline="true"
         :style="{display: play ? 'block' : 'none'}">您的浏览器不支持 video 标签。</video>
          <div class="stop_text" :style="{display: play ? 'block' : 'none'}" @click="stopVideo">关闭</div>
      </div>
      <div v-if="goods.videourl && !play" class="play_btn"><van-icon name="play" size="60px" class="red" @click="playVideo"/></div>
    </div>

    <div class="jiagetiao" v-if="goods">
      <div class="jiagetiao_left">
        <div><span class="jiage_sell_price_text"><b>{{goods.marketprice}}</b></span></div>
        <div>
          <div class="jiage_market_price_text"><s>¥{{goods.productprice}}</s></div>
          <div class="jiage_market_price_text">剩余{{goods.total - goods.salesreal}}{{goods.unit}}</div>
        </div>
        <div v-if="goods.vipprice && goods.isvip" class="vip_panel"><span>会员</span><b class="jiage_sell_price_text">{{goods.vipprice}}</b></div>
      </div>
      <div class="jiagetiao_center" :style="{backgroundImage: `url(${jiangeImage})`}"></div>
      <div class="jiagetiao_right">
        <div>
          <div :style="statusStyle">{{statusText}}</div>
          <countdown v-if="!isSoldOut && leftTime > 0" :time="leftTime" @countdownend="countDownEnd">
            <template slot-scope="props">
              <span class="red" style="margin-left: 15px;">{{props.days}}天{{props.hours}}:{{ props.minutes }}:{{ props.seconds }}</span>
            </template>
          </countdown>
        </div>
      </div>
    </div>

    <van-cell-group class="item_cell_group" v-if="goods">
      <van-cell class="item_info">
        <h3 class="item_title">
          {{ goods.title }}{{goods.specTitle}}
          <!-- 积分商品标识 -->
            <img src="../../../assets/images/jifen.png" class="points" v-if="(goods.iscredits==1) && goods.productId">
          </h3>
        <div v-if="goods.uncancelable === 1" style="color: red; font-size: 12px;">该商品不支持无理由退单</div>
        <hr size=1 style="color: #f0f0f0;border-style:dashed;width:100%">
        <div>
          <span class="tagline">关注 {{goods.viewcount}}</span>
          <span class="tagline" v-if="goods.selfvalue">{{goods.selfvalue}}</span>
        </div>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="item_cell_group" v-if="goods">
      <van-cell>
        <template slot="title">
          <div class="item_sales">累计销售：<span><b>{{goods.salesreal + goods.sales}}</b></span>{{goods.unit}}</div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group v-if="goods.recommends.length > 0">
      <van-cell>
        <div style="text-align:center;font-size:12px;">
          <div style="float:left;">
            <van-icon name="arrow-left" />-----</div>
          最好搭配以下商品一起购买
          <div style="float:right;">-----
            <van-icon name="arrow" />
          </div>
        </div>
        <item-group class="interval_bot">
          <item-card-hori v-for="item in goods.recommends" :goods="item" :key="item.id" @click="toGoods(item)">
          </item-card-hori>
        </item-group>
      </van-cell>
    </van-cell-group>
    <item-detail :desc="goods.description" v-if="goods" />
  </van-tab>

</template>

<script>
    import ItemCardHori from '@/vue/components/item-card-hori/';
    import ItemGroup from "@/vue/components/item-group/";

    import {
        Swipe,
        SwipeItem,
        Tab
    } from "vant";
    import {
      BIND_SHOP
    } from "@/api/shop";

    import jiangeImage from "@/assets/images/jiange.jpg";
    import ItemDetail from "@/vue/components/item-detail/";
    import { IMAGE_PREFIX } from "@/api/goods"
  import moment from 'moment';

  export default {
    name: "tab-detail",

    props: {
      goods: Object,
      serverTime: Number
    },

    data() {
      const clientW =
        document.body.clientWidth || document.documentElement.clientWidth;
      const imageHeight = clientW ? clientW * 2 / 3 : 250;

      return {
        showContact: false,
        imageHeight,
        jiangeImage,
        play: false,
        // swipeWidth:''//轮播图片尺寸
      };
    },
    created(){
    if(this.$route.query.tid) {
       this.onChangeShop(this.$route.query.tid);
    }
    },
    computed: {
      imageUrls() {
        let images = [this.goods.thumb.slice(0, 4) === "http" ? this.goods.thumb : IMAGE_PREFIX + this.goods.thumb];
        let thumbUrl = this.goods.thumbUrl;

        if (!thumbUrl) {
          return images;
        }


        if (thumbUrl.slice(0, 1) === 'a') {
          let tmp = thumbUrl.slice(4);
          let content = tmp.split(';');

          content.forEach(element => {
            if (element.slice(0, 1) === "s") {
              let urls = element.split(':');
              let url = urls[2];

              for (let i = 3; i < urls.length; ++i) {
                url += ":" + urls[i];
              }

              url = url.substr(1, url.length - 2);//去除两端引号
              url = (url.slice(0, 7) === "http://") ? url : IMAGE_PREFIX + url;
              images.push(url);
            }
          });
        } else {
          let url = thumbUrl.split(',');
          images.push(...url);
       }

        return images;
      },

      endTime() {
        const time = Date.parse(this.goods.timeend.replace(/-/g, '/')) - this.serverTime;
        return (time > 0) ? time : 0;
      },
      startTime() {
        const time = Date.parse(this.goods.timestart.replace(/-/g, '/')) - this.serverTime;
        return (time > 0) ? time : 0;
      },
      leftTime() {
        if (this.startTime > 0) {
          return this.startTime;
        } else if (this.endTime > 0) {
          return this.endTime;
        } else {
          return 0;
        }
      },
      statusText() {
        if (this.endTime === 0) {
          return '团购已结束';
        }

        if (this.startTime > 0) {
          return '即将开团';
        }

        if (this.endTime > 0) {
          if (this.isSoldOut) {
            return '已售罄';
          }

          return '即将结束';
        }
      },
      isSoldOut() {
        return this.goods.total <= (this.goods.salesreal + this.goods.sales);
      },
      statusStyle() {
        if (!this.isSoldOut && this.leftTime > 0) {
          return {
            'margin-top': '10px',
            'margin-left': '-30px',
            color: 'gray'
          }
        } else {
          return {
            'line-height': '60px',
            color: 'gray'
          }
        }
      },

      showVideo() {
       return this.goods.videourl && this.play;
     },

     buyMembers() {
       //过滤无效数据
       const start = moment(this.goods.timestart).utc();

       let buyLogs = this.goods.buyLogs.filter(item => {
          return moment(item.createTime) >= start;
       });

       return buyLogs.length;
     }
    },
    methods: {
      //切换商店
    onChangeShop(shopId) {
      if (this.user.upshopTid == shopId || this.user.isteam == 3) {
        return;
      }
      this.$reqPost(BIND_SHOP,{memberId: this.user.id, teamId: shopId, time:new Date().getTime()}).then(res => {
        this.user.upshopTid = shopId;
        const centerId = res.data.data;
        this.user.centreId = centerId;
        this.saveUser(this.user);
        window.location.href = 'https://m.jinzhishenghuo.com/wemall/?id='+ 10000*Math.random();
        // window.location.href = 'https://t.liyboo.com/wemall/?id='+ 10000*Math.random();
        // window.location.href = window.location.href + "?id="+ 10000*Math.random();
      });
    },
      toGoods(item) {
        this.$router.push({ path: `/items/detail/${item.recommendProductId}` });
      },
      playVideo() {
        this.play = true;
          // let player = this.$refs.videoPlayer;
          // player.play();
          this.$nextTick(()=> {
            this.$refs.videoPlayer.play();
          });
      },
      stopVideo() {
        this.play = false;
        let player = this.$refs.videoPlayer;
        player.currentTime=0;
        player.pause();
      },
      countDownEnd() {
        location.reload();
      }
    },
    components: {
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Tab.name]: Tab,
      [ItemGroup.name]: ItemGroup,
      [ItemCardHori.name]: ItemCardHori,
      [ItemDetail.name]: ItemDetail
    }
  };
</script>

<style lang="scss" scoped>
.item_cell_group {
  margin-bottom: 10px;
}

.item_price {
  font-size: 20px;
  color: $red;
  margin-right: 10px;
}

.item_market_price {
  color: $font-color-gray;
  text-decoration: line-through;
  font-size: $font-size-small;
}

.item_title {
  line-height: 1.4;
  margin: 0;
  .points {
    position: absolute;
    // top: 1px;
    bottom: 50px;
    padding-left: 5px;
    width: 12px;
    height: 12px;
  }
}

.item_sales {
  font-size: 16px;
  text-align: center;
  span {
    color: $red;
    font-size: 18px;
  }
}

.jiagetiao {
  height: 50px;
  width: 100%;
  margin-top: -5px;
  display: flex;
}

.jiagetiao_left {
  background-color: #00cc66;
  height: 100%;
  color: white;
  width: 65%;
  display: flex;
  align-items: center;
  text-align: center;
}
.jiagetiao_center {
  height: 100%;
  width: 34px;
}
.jiagetiao_right {
  background-color: #fdd003;
  height: 100%;
  width: 35%;
  text-align: center;
}

.jiage_sell_price_text:before {
    content: "¥";
    font-size: 13px;
}

.jiage_sell_price_text {
  font-size: 35px;
  margin-left: 10px;
}

.vip_panel {
  margin-left: 10px;
  background-color: $red;
  border-radius: 5px;
  b {
    margin-left: 0;
  }
}

.jiage_market_price_text {
  font-size: 12px;
  margin: 0 0 0 10px;
}
.tagline {
  background-color: $red;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  padding: 2px 4px;
  margin: 0 3px;
  // display: inline-block;
}
.play_btn {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 40%;
}

.stop_text {
  position: absolute;
  top: 35px;
  right: 10px;
  color: $red;
}

</style>
